---
type: tutorial
title: Adicione estilização para todo o site
description: |-
  Tutorial: Construa seu primeiro blog Astro —
  Crie uma folha de estilos global para estilizar o site inteiro
i18nReady: true
---
import Badge from '~/components/Badge.astro';
import Checklist from '~/components/Checklist.astro';
import Spoiler from '~/components/Spoiler.astro';
import Box from '~/components/tutorial/Box.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';


Agora que você tem uma página Sobre estilizada, é hora de adicionar alguns estilos globais para o resto do seu site!

<PreCheck>
  - Aplicar estilos globalmente
</PreCheck>

## Adicione uma folha de estilos global

Você pode ver que a tag `<style>` do Astro é **escopada por padrão**, o que significa que ela apenas afeta os elementos em seu próprio arquivo.

Há algumas formas de definir estilos **globalmente** no Astro, mas neste tutorial, você irá criar e importar um arquivo `global.css` em cada uma de suas páginas. Essa combinação de folha de estilo e tag `<style>` te dá a habilidade de controlar alguns estilos para todo o site, e aplicar alguns estilos específicos exatamente onde você os quer.

1. Crie um novo arquivo em `src/styles/global.css` (Você terá que criar uma pasta `styles` primeiro.)

2. Copie o seguinte código em seu novo arquivo, `global.css`

    ```css title="src/styles/global.css"
    html {
      background-color: #f1f5f9;
      font-family: sans-serif;
    }

    body {
      margin: 0 auto;
      width: 100%;
      max-width: 80ch;
      padding: 1rem;
      line-height: 1.5;
    }

    * {
      box-sizing: border-box;
    }

    h1 {
      margin: 1rem 0;
      font-size: 2.5rem;
    }
    ```

3. Em `about.astro`, adicione a seguinte declaração de importação ao seu frontmatter: 

    ```astro title="src/pages/about.astro" ins={2}
    ---
    import '../styles/global.css';

    const pageTitle = "Sobre Mim";

    const identity = {
      firstName: "Sarah",
      country: "Canadá",
      occupation: "Escritora Técnica",
      hobbies: ["fotografia", "observar pássaros", "beisebol"],
    };

    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Escrever Documentação"];

    const happy = true;
    const finished = false;
    const goal = 3;

    const skillColor = "navy";
    const fontWeight = "bold";
    const textCase = "uppercase";
    ---
    ```

4. Verifique a pré-visualização do navegador de sua página Sobre, e você deve ver os novos estilos aplicados!

<Box icon="puzzle-piece">

## Tente você mesmo - Importe sua folha de estilos global

Adicione a linha de código necessária para cada arquivo `.astro` em seu projeto para aplicar seus estilos globais em cada página do seu site.

<details>
<summary>✅ Me mostre o código! ✅</summary>

Adicione a seguinte declaração de importação para os outros dois arquiivos de página: `src/pages/index.astro` and `src/pages/blog.astro`

```astro title="src/pages/index.astro" ins={2}
---
import '../styles/global.css';
---
```
</details>
</Box>

Faça quaisquer alterações ou adições que você quiser para o conteúdo da sua página Sobre adicionando elementos HTML para o template da página, seja estaticamente ou dinamicamente. Escreva qualquer JavaScript adicional no seu script frontmatter para te fornecer valores para utilizar no seu HTML. Quando você estiver feliz com essa página, faça commit das suas mudanças para o GitHub antes de seguir para a próxima lição.

<Box icon="question-mark">

### Analise o Padrão

Sua página Sobre agora está estilizada utilizando *ambos* o arquivo `global.css` *e* a tag `<style>`.

- Os estilos de ambos os métodos de estilização estão sendo aplicados? 

    <p>
      <Spoiler>Sim</Spoiler>
    </p>

- Há quaisquer estilos conflitantes, e se sim, quais são aplicados?

    <p>
      <Spoiler>Sim, `<h1>` tem um tamanho de `2.5rem` globalmente, porém é `4rem` localmente na tag `<style>`. A regra local `4rem` é aplicada na página Sobre.</Spoiler>
    </p>

- Descreva como `global.css` e `<style>` trabalham juntos.

    <p>
      <Spoiler>Quando estilos conflitantes são definidos ambos globalmente e na tag `<style>` local de uma página, os estilos locais devem sobrescrever quaisquer estilos globais. (Porém, pode ter outros fatores envolvidos, então sempre inspecione visualmente o seu site para certificar-se que seus estilos estão sendo apropriadamente aplicados!)</Spoiler>
    </p>

- Como você escolheria entre declarar um estilo no arquivo `global.css` ou em uma tag `<style>`?

    <p>
      <Spoiler>Se você quer que um estilo seja aplicado por todo o site, você deve escolher utilizar o arquivo `global.css`. Porém, se você quer estilos aplicados apenas ao conteúdo HTML de um único arquivo `.astro`, e não afetar outros elementos no seu site, você deve escolher uma tag `<style>`.</Spoiler>
    </p>

</Box>



<Box icon="check-list">
## Checklist

<Checklist>
- [ ] Eu posso adicionar estilos CSS globais importando um arquivo `.css`.
</Checklist>
</Box>

### Recursos
- [Sintaxe do Astro vs JSX - comparação](/pt-br/basics/astro-syntax/#diferenças-entre-astro-e-jsx)

- [tag `<style>` do Astro](/pt-br/guides/styling/#estilização-em-astro)

- [Variáveis CSS no Astro](/pt-br/guides/styling/#variáveis-no-css)



